<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="button" id="btn">拆开</div>

<div class="box"  id="box">
    <div class="boxBg"></div>
    <div class="header">
        <div class="back"></div>
        <div class="logo"></div>
        <div class="signOut">退出</div>
        <ul class="code">
            <li>&lt;div class="header"&gt;</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="back"&gt;&lt;/div&gt;</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="logo"&gt;&lt;/div&gt;</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="signOut"&gt;退出&lt;/div&gt;</li>
            <li>&lt;/div&gt;</li>
        </ul>
    </div>
    <div class="banner">
        <div class="head">
            <img src="img/header.png">
        </div>
        <div class="name">
            <span>我是程序员</span>
            <img src="img/label.png">
        </div>
        <div class="time">注册时间：2016-01-27</div>
    </div>
    <div class="userBox">
        <div class="title">个人资料</div>
        <ul class="menu">
            <li class="item">
                <i class="icon info"></i>
                <span class="text">基本信息</span>
            </li>
            <li class="item">
                <i class="icon user"></i>
                <span class="text">个人信息</span>
            </li>
            <li class="item">
                <i class="icon vip"></i>
                <span class="text">VIP信息</span>
            </li>
            <li class="item">
                <i class="icon car"></i>
                <span class="text">我的订单</span>
            </li>
            <li class="item">
                <i class="icon record"></i>
                <span class="text">视频激活记录</span>
            </li>
            <li class="item">
                <i class="icon device"></i>
                <span class="text">视频激活设备</span>
            </li>
            <li class="item">
                <i class="icon count"></i>
                <span class="text">绑定账号</span>
            </li>
            <li class="item">
                <i class="icon more"></i>
            </li>
        </ul>
    </div>
    <div class="safeBox">
        <div class="title">安全设置</div>
        <ul class="menu">
            <li class="item">
                <i class="icon password"></i>
                <span class="text">修改密码</span>
            </li>
            <li class="item">
                <i class="icon email"></i>
                <span class="text">修改绑定邮箱</span>
            </li>
        </ul>
    </div>
</div>


<script>
    btn.onclick = function(){
        box.classList.toggle('active');
    }

    let header = document.querySelector('.header');
    let userBox = document.querySelector('.userBox');
    header.onclick = function(){
        this.classList.toggle('active');
    }

    userBox.onclick = function(){
        this.classList.toggle('active');
    }

    let code = header.querySelectorAll('.code li');
    let backBtn = header.querySelector('.back');
    let logoBtn = header.querySelector('.logo');
    let signOut = header.querySelector('.signOut');

    code[1].onclick = function(ev){
        backBtn.classList.toggle('active');
        this.classList.toggle('active');
        ev.stopPropagation();
    }
    code[2].onclick = function(ev){
        logoBtn.classList.toggle('active');
        this.classList.toggle('active');
        ev.stopPropagation();
    }
    code[3].onclick = function(ev){
        signOut.classList.toggle('active');
        this.classList.toggle('active');
        ev.stopPropagation();
    }
</script>

</body>
</html>